<template >
  <div class="dialogCnener">
    <el-dialog
      :title="data.equipmentName"
      :visible="detailVisibles"
      :destroy-on-close="true"
      width="1152px"
      :before-close="drawCloses"
      :close-on-click-modal="false"
      class="aaa"
      @opened="init"
    >
      <div class="dialogCharts">
        <div class="Numbers">
          <div class="NumbersJing">
            <div id="containers"></div>
          </div>
          <div class="NumbersSpan">
            <div @click="dialogFilter('5m')" :class="activeIn == '5m' ? 'dialogCnenerActive' : ''" class="one num">5m </div>
            <div @click="dialogFilter('10m')" :class="activeIn == '10m' ? 'dialogCnenerActive' : ''" class="two num">10m </div>
            <div @click="dialogFilter('15m')" :class="activeIn == '15m' ? 'dialogCnenerActive' : ''" class="three num">15m</div>
            <div @click="dialogFilter('20m')" :class="activeIn == '20m' ? 'dialogCnenerActive' : ''" class="four num">20m</div>
            <div @click="dialogFilter('25m')" :class="activeIn == '25m' ? 'dialogCnenerActive' : ''" class="five num">25m</div>
            <div @click="dialogFilter('30m')" :class="activeIn == '30m' ? 'dialogCnenerActive' : ''" class="six num ">30m</div>
            <div @click="dialogFilter('35m')" :class="activeIn == '35m' ? 'dialogCnenerActive' : ''" class="seven num">35m</div>
            <div @click="dialogFilter('40m')" :class="activeIn == '40m' ? 'dialogCnenerActive' : ''" class="eight num">40m</div>
            <div @click="dialogFilter('45m')" :class="activeIn == '45m' ? 'dialogCnenerActive' : ''" class="nine num">45m</div>
            <div @click="dialogFilter('50m')" :class="activeIn == '50m' ? 'dialogCnenerActive' : ''" class="ten num">50m</div>
          </div>
          <div class="NumbersSpans">
            <!-- <div v-for="item in  10" >-10.00℃</div> -->
            <div
              v-for="(item, index) in temperature"
              :key="index"
              :style="'color:' + (item == '异常' ? 'red' : '#94A0B7') + ';'"
            >
              {{ item }}
            </div>

          </div>
        </div>
        <div class="NumbersTiem">
          数据时间: {{ moreTempTime }}
       </div>
       <div class="chartsWhole1" @click="changeEcharts(1)" :class="{activeColors:activeColor==1}"  > <i class="el-icon-icondefuben_fenxi1" style=" text-align:center; font-size: 18px;margin-right: 3px; "></i>折线图</div>
       <div class="chartsWhole2" @click="changeEcharts(2)" :class="{activeColors:activeColor==2}" ><i class="el-icon-sandiantu2" style=" text-align:center; font-size: 18px; margin-right: 3px; "></i>散点图</div>
       <div class="chartsWhole3">
         <el-select v-model="type"  @change="typeChange" placeholder="请选择">
           <el-option
             v-for="item in typeOptions"
             :key="item.value"
             :label="item.label"
             :value="item.value"
           >
           </el-option>
         </el-select>
       </div>


        <div v-if="activeOne"   class="chartsWhole" @click="dialogFilter('all')" >全部</div>

        <div class="charts" v-if="activeOne"  key="echarts1">
            <line-chart-four v-if="activeIndex" :chart-data="chartData" :check-list="checkList" :height="height"></line-chart-four>
        </div>
        <div class="charts" v-if="!activeOne"  key="echarts2">
            <scatter :chart-data="chartData"   :height="height"></scatter>
        </div>
      </div>
    </el-dialog>
    
  </div>
</template>

<script>
import LineChartFour from "./LineChartFour.vue";
import scatter from "./scatter.vue";
import {
  getTemperatureChartDataIndex,
  getLastTemp,
} from "../../api/baseinfo/moreTemperatureData";
// 引入three.js
import * as THREE from "three";
// 引入扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 引入扩展库GLTFLoader.js
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
export default {
  name: "DialogComponentOne",
  components: {
    LineChartFour,
    scatter
  },
  props: {
    data: {
      type: Object,
      required: true,
    },
    detailVisibles: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    Dialog() {
      return this.$refs.Dialog;
    },
  },
  data() {
    return {
      // 切换颜色
      activeColor:1,
      // 切换按钮
      activeOne:true,
      scene: null,
      camera: null,
      renderer: null,
      // 切换
      activeIndex: false,
      activeIn: "",
      checkList: [],
      chartData: {},
      // 自定义数据
      temperature: [],
      moreTempTime: null,
      height: "540px",
      timer: null,
      type:1,
      typeOptions:[
        {value:1,label:"默认"},
        {value:2,label:"一小时"},
        {value:3,label:"十二小时"},
        {value:4,label:"一天"},
        {value:5,label:"一周"},
        {value:6,label:"一月"},
        {value:7,label:"一年"},
      ]
    };
  },
  methods: {
    init() {
      this.handleGetChartData();
      this.getLastTemp();
      this.reflashData();
      this.initThree();
    },
    initThree() {
      let containers = document.getElementById("containers");
      // 创建材质
      const bodyMaterial= new THREE.MeshPhysicalMaterial({
      color:0x757575,
      // 设置金属度
      metalness:1,
      // 粗糙度
      roughness:0.5,
      // 清漆光滑效果
      clearcoat:1,
      // 粗糙度
      clearcoatRoughness:0,
      })
      const dimianMaterial= new THREE.MeshPhysicalMaterial({
      color:0xFFD15C,
      // 设置金属度
      metalness:1,
      // 粗糙度
      roughness:0.5,
      // 清漆光滑效果
      clearcoat:1,
      // 粗糙度
      clearcoatRoughness:0,
      })
      const taiyangMaterial= new THREE.MeshPhysicalMaterial({
      color:0x000000,
      // 设置金属度
      metalness:0.2,
      // 粗糙度
      roughness:0.8,
      // 清漆光滑效果
      clearcoat:0.3,
      // 粗糙度
      clearcoatRoughness:0.5,
      })

      const zhuziMaterial= new THREE.MeshPhysicalMaterial({
      color:0xffffff,
      // 设置金属度
      metalness:1,
      // 粗糙度
      // roughness:0.5,
      // 清漆光滑效果
      clearcoat:1,
      // 粗糙度
      clearcoatRoughness:0,
      })



      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color(0x00091a);

				let linght1=new THREE.DirectionalLight(0xffffff);
        linght1.position.set(0,0,100)
				this.scene.add(linght1);


		  	let	linght2=new THREE.DirectionalLight(0xffffff);
			  linght2.position.set(0,0,-100)
        this.	scene.add(linght2);

	  		let	linght3=new THREE.DirectionalLight(0xffffff);
        linght3.position.set(100,0,0)
        this.	scene.add(linght3);
        let linght4=new THREE.DirectionalLight(0xffffff);
        linght4.position.set(0,100,10)
				this.scene.add(linght4);


		  	let	linght5=new THREE.DirectionalLight(0xffffff);
			  linght5.position.set(50,100,0)
        this.	scene.add(linght5);

	  		let	linght6=new THREE.DirectionalLight(0xffffff);
        linght6.position.set(100,-100,0)
        this.	scene.add(linght6);
        let linght7=new THREE.DirectionalLight(0xffffff,0.3);
        linght7.position.set(0,-100,10)
				this.scene.add(linght7);
		  	let	linght8=new THREE.DirectionalLight(0xffffff,0.3);
			  linght8.position.set(0,100,-50)
        this.	scene.add(linght8);

	  		let	linght9=new THREE.DirectionalLight(0xffffff,0.3);
        linght9.position.set(0,100,50)
        this.	scene.add(linght9);
        let	linght10=new THREE.DirectionalLight(0xffffff,0.3);
        linght10.position.set(0,0,-100)
        this.	scene.add(linght10);
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      let clientWidth = containers.clientWidth;
      this.renderer.setSize(clientWidth, containers.clientHeight);
      containers.appendChild(this.renderer.domElement);
      this.camera = new THREE.PerspectiveCamera(
        70,
         clientWidth/containers.clientHeight  ,
        0.1,
        4000
      );
      this.camera.position.set(130,0,130);

      this.scene.add(this.camera);
      this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对

      let controls = new OrbitControls(this.camera, this.renderer.domElement);
      // to disable zoom 放大
      controls.enableZoom = false;
      // to disable rotation//禁止旋转
      controls.enableRotate = true;
      // to disable pan  //禁止平移
      controls.enablePan = false;
         //设置相机距离原点的最远距离
      // controls.minDistance = 200
       //设置相机距离原点的最远距离
      //  controls.maxDistance = 600
      // 最大仰视角和俯视角
      controls.minPolarAngle = Math.PI * (90/180);
      controls.maxPolarAngle = Math.PI * (90/ 180);

      // 左右旋转范围 水平方向视角限制
      controls.minAzimuthAngle = Math.PI * (30/ 180);
      controls.maxAzimuthAngle = -Math.PI * (30 / 180);

      controls.addEventListener("change", () => {
        controls.object.position.y= 0;
        this.renderer.render(this.scene, this.camera);
      });
      let wheels = [];
      let carBody, dimian, taiyang, zhuzi,ganzi,dianxiang,yuanzhu;
      // 添加模型
      const loader = new GLTFLoader();
      loader.load("models/object3/scene.gltf", (result) => {
        let donut = result.scene;
        console.log(donut,'123456789')
        donut.traverse((child)=>{

        if (child.isMesh && child.name.includes("管道")) {
          child.material=bodyMaterial
          wheels.push(child);
          }

        if (child.isMesh && child.name.includes("地面")) {
          dimian = child;
          dimian.material=dimianMaterial
        }

        if (child.isMesh && child.name.includes("柱子")) {
          zhuzi = child;
          zhuzi.material=zhuziMaterial
        }
        if (child.isMesh && child.name.includes("太阳能杆子")) {
          ganzi = child;
          ganzi.material=bodyMaterial
        }
        })


        const radius = 0.1;
        donut.rotation.x = Math.PI*0
        donut.rotation.y = Math.PI * 45/180
        donut.rotation.z =Math.PI *0
        donut.scale.set(radius, radius, radius);
        donut.position.set(0,10,0)
        this.scene.add(donut);
        this.animate();
      });
    },
    animate() {
      //执行渲染操作   指定场景、相机作为参数
      this.renderer.render(this.scene, this.camera);
      requestAnimationFrame(this.animate);
    },

    //获取echarts数据
    handleGetChartData() {
      getTemperatureChartDataIndex({equipmentCode:this.data.gyroscopeCode,type:this.type}).then((res) => {
        this.chartData = res.chartData;
        this.timeList = res.chartData.timeList[1];
        this.activeIndex = true;
        console.log("表单数据====》")
        console.log(this.chartData)
      });
    },
    typeChange(){
      console.log("type改变")
      this.handleGetChartData()
    },
    getLastTemp() {
      getLastTemp(this.data.gyroscopeCode).then((res) => {
        if (res.data) {
          this.moreTempTime = res.data.dataTime;
          this.temperature = [];
          if (res.data.temperature5 == 0.0) {
            this.temperature.push("异常");
          } else {
            this.temperature.push(res.data.temperature5.toFixed(2) + "℃");
          }
          if (res.data.temperature10 == 0.0) {
            this.temperature.push("异常");
          } else {
            this.temperature.push(res.data.temperature10.toFixed(2) + "℃");
          }
          if (res.data.temperature15 == 0.0) {
            this.temperature.push("异常");
          } else {
            this.temperature.push(res.data.temperature15.toFixed(2) + "℃");
          }
          if (res.data.temperature20 == 0.0) {
            this.temperature.push("异常");
          } else {
            this.temperature.push(res.data.temperature20.toFixed(2) + "℃");
          }
          if (res.data.temperature25 == 0.0) {
            this.temperature.push("异常");
          } else {
            this.temperature.push(res.data.temperature25.toFixed(2) + "℃");
          }
          if (res.data.temperature30 == 0.0) {
            this.temperature.push("异常");
          } else {
            this.temperature.push(res.data.temperature30.toFixed(2) + "℃");
          }
          if (res.data.temperature35 == 0.0) {
            this.temperature.push("异常");
          } else {
            this.temperature.push(res.data.temperature35.toFixed(2) + "℃");
          }
          if (res.data.temperature40 == 0.0) {
            this.temperature.push("异常");
          } else {
            this.temperature.push(res.data.temperature40.toFixed(2) + "℃");
          }
          if (res.data.temperature45 == 0.0) {
            this.temperature.push("异常");
          } else {
            this.temperature.push(res.data.temperature45.toFixed(2) + "℃");
          }
          if (res.data.temperature50 == 0.0) {
            this.temperature.push("异常");
          } else {
            this.temperature.push(res.data.temperature50.toFixed(2) + "℃");
          }
        }
      });
    },
    reflashData() {
      this.timer = setInterval(() => {
        this.getLastTemp();
      }, 120000);
    },
    drawCloses() {
      clearInterval(this.timer);
      this.activeIndex = false;
      this.$emit("close", false);
    },
    dialogFilter(param) {
      if (param == "all") {
        this.checkList = [];
      } else {
        this.checkList = [param];
      }
      this.activeIn = param;
    },

    // 切换echarts
    changeEcharts(v){
      if(v==1){
        this.activeOne=true;
        this.activeColor=1;
      }else if(v==2){
        this.activeOne = false;
        this.activeColor=2;
      }
    }

  },
};
</script>
<style >
.cursors {
  cursor: pointer; /*鼠标变小手*/
}
.dialogCnener {
  position: absolute;
}
.dialogCnener .el-dialog {
  margin-top: 7% !important;
  left: 20%;
  right: 20%;
  overflow: hidden;
  margin: 0;
  background-color: #00091a;
  height: 660px;
}
/* 整体的背景颜色  宽高等 */
.dialogCnener .el-dialog.ttb {
  width: 100%;
  left: 0;
  right: 0;
  height: auto !important;
  background-color: #00091a;
}
.dialogCnener .el-dialog__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  background: rgba(220, 220, 238, 0.1);
}
.dialogCnener .el-dialog__title {
  line-height: 48px;
  font-size: 18px;
  /* color: #303133; */
  color: aqua;
}
.dialogCnener .el-dialog__header {
  padding: 20px;
  padding-bottom: 10px;
  text-align: center;
}

#containers {
  width: 240px;
  height: 540px;
  z-index: -1;
  /* border: 1px solid yellow; */
  /* position: relative; */
}

.dialogCnener .el-dialog__header {
  height: 50px;
  padding: 0 !important;
  background-image: url("../../assets/img/bg_head1.png");
  overflow: hidden;
  background-size: 100% 100%;
  text-align: center;
  margin-bottom: 10px;
}
.dialogCnener .el-dialog__body {
  padding: 0 0 5px 0 !important;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
/* 标题的颜色
 */

.dialogCnener .el-dialog__title {
  font-size: 18px;
  color: #fff;
  line-height: 48px;
  text-align: center;
}
/* 小 XX */
.dialogCnener .el-icon-close:before {
  content: "\e6db";
  color: #fff;
}

/* 标题 */
.dialogCnener .aaa span {
  margin-top: -18px;
  letter-spacing: 1px;
}

.dialogCharts {
  padding: 20px 20px;
  display: flex;
}

.dialogCnener .dialogCharts .Numbers {
  width: 26%;
  height: 560px;
  float: left;
  /* border: 1px solid yellow; */
}
.dialogCnener .Numbers .NumbersJing {
  margin-top: 10px;
  width: 280px;
  height: 550px;
  /* border: 1px solid red; */
  /* float: left; */
  /* border: 1px solid red; */
  position: relative;
}
/* .dialogCnener .Numbers .NumbersJing img{
  display: block;
  width: 100%;
  height: 100%;
} */
.dialogCnener .Numbers .NumbersSpan {
  position: absolute;
  top: 51.5%;
  left: 80px;
  float: left;
  width: 60px;
  font-size: 14px;
  text-align: left;
}

.one {
  color: #b5c706 !important;
}
.two {
  color: #76d305 !important;
}
.three {
  color: #00eb43 !important;
}
.four {
  color: #00f78c !important;
}
.five {
  color: #00ecb8 !important;
}
.six {
  color: #00b6df !important;
}
.seven {
  color: #003eb4 !important;
}
.eight {
  color: #0018fe !important;
}
.nine {
  color: #5b00f4 !important;
}
.ten {
  color: #48008b !important;
}
.dialogCnener .Numbers .NumbersSpan .num {
  display: block;
  margin-top: 11px;
  cursor: pointer; /*鼠标变小手*/
  color: #94a0b7;
  border-bottom:1px solid;
  border-image: linear-gradient(90deg, rgba(10, 10, 10, 0.8) 25%, #4b8b9b 50%, rgba(60, 93, 126, 0.8) 99%) 2 2 2 2;
}
.dialogCnener .Numbers .NumbersSpan .num::before {
  content: "";
  height: 8px;
  width: 8px;
  border-radius: 50%;
  position: absolute;
  transform-origin: right bottom;
  margin-top: 3px;
  left: 52px;
  background: white;
  transform: rotate(198deg);

}


.dialogCnener .Numbers .NumbersSpans {
  position: absolute;
  top: 53.9%;
  left: 175px;
  float: left;
  width: 55px;
  font-size: 14px;
  /* margin-left:8px ; */
  text-align: center;
  display: inline-block;

}
.dialogCnener .Numbers .NumbersSpans div::after {
  content: "";
  height: 1px;
  width: 26px;
  position: absolute;
  transform-origin: left bottom;
  background: white;
  left: 0;
  margin-top: 15px;
  transform: rotate(198deg);
}
.dialogCnener .Numbers .NumbersSpans div::before {
  content: "";
  height: 1px;
  width: 20px;
  background-color: white;
  /* border: 1px solid red; */
  position: absolute;
  left: 0;
  margin-top: 16px;
}
.dialogCnener .Numbers .NumbersSpans div {
  display: block;
  margin-top: 8.5px;
  color: #94a0b7;
  transform-origin: left bottom;
  /* border-bottom: 1px solid white; */
  display: inline-block;
}

.dialogCnener .charts {
  margin-right: auto;
  margin-top: 15px;
  width: 73%;
  position: relative;
  height: 520px;
}
.NumbersTiem {
  width: 100%;
  position: absolute;
  top: 72px;
  text-align: left;
  font-size: 14px;
  color: white;
  margin-bottom: 12px;
}
.dialogCnener .chartsWhole {
  position: absolute;
  width: 60px;
  height: 20px;
  right: 48px;
  top: 100px;
  text-align: center;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid white;
  background: #94a0b7;
  color: white;
  z-index: 9999;
}
.dialogCnener .chartsWhole1 {
  position: absolute;
  width: 80px;
  height: 25px;
  left: 323px;
  line-height: 25px;
  top: 80px;
  text-align: center;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #65acc2;
  background-color: #32373f;
  color: #84d4ec;
  z-index: 9999;
}
.dialogCnener .chartsWhole2{
  position: absolute;
  width: 80px;
  height: 25px;
  left: 410px;
  top: 80px;
  text-align: center;
  line-height: 25px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #65acc2;
  background-color: #32373f;
  color: #84d4ec;
  z-index: 9999;
}

.dialogCnener .chartsWhole3{
  position: absolute;
  height: 21.5px;
  width: 120px;
  left: 500px;
  top: 80px;
  text-align: center;
  line-height: 25px;
  font-size: 13px;
  cursor: pointer;
  background-color: #00091a   !important;

  color: #84d4ec;
  z-index: 9999;
  border-radius: 8px;
}

.dialogCnener .chartsWhole3 .el-input__inner {
    -webkit-appearance: none;
    background-color: #00091a;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #84d4ec;
  box-shadow: 0px 0px 6px #0783FA !important;


    display: inline-block;
    font-size: inherit;
    height: 25px;
    line-height: 25px;
    outline: none;
    padding: 0 15px;
    -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
}

.dialogCnener .chartsWhole3 .el-select .el-input .el-select__caret {
  text-align: right;
  margin-top: 98%;
  color: #84d4ec;
    font-size: 16px;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    -webkit-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    cursor: pointer;
}
.activeColors{
  color: #01c2ff !important ;
  border: 1px solid #01c2ff !important;
  background-color: #00091a   !important;
  box-shadow: 0px 0px 6px #0783FA !important;

}


.chartsWhole:hover {
  color: aqua;
  background: rgb(181, 216, 230);
}
</style>
